import { observer } from 'mobx-react'
import { useStore } from '@renderer/store'
import { Button, Message } from '@arco-design/web-react'
import { IconDelete} from '@arco-design/web-react/icon'
import NoteCard from '@renderer/components/NoteCard'

function Trash() {
  const { noteStore } = useStore()

  const handleClear = () => {
    noteStore.clearTrash().then(res => {
      Message.success('success')
    })
  }

  return <>
    <div className="page-wrapper">

      <div className="header">
        <h3>
          Pages and notes on this page will get automatically deleted after 31 days.
        </h3>

        <Button type='secondary' status='danger' icon={<IconDelete />} onClick={handleClear}>
            Empty Trash
        </Button>
      </div>

      <div className="note-list">
        {noteStore.trashList.length > 0 && noteStore.trashList.map(item => {
          return <div key={item.id} className="item"><NoteCard data={item} /></div>
        })}
      </div>
    </div>
  </>
}

export default observer(Trash)
